<template>
 <div id="detail">
     <child-detail class="detail-nav" @titleClick='titleClick' ref="nav"></child-detail>
     <scroll class="content" ref="scroll" @scroll="contentScroll" :probeType="3">
     <detail-swiper :top-images="topImages" ref="swiper"></detail-swiper>
     <datail-base-info :goods='goods' ref="base"></datail-base-info>
     <detail-shop-info :shop="shop" ref="shop"></detail-shop-info>
     <detail-comment-info ref="comment"></detail-comment-info>
     </scroll>
     <detail-btn-bar @addToCart="addCart"></detail-btn-bar>
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
    <!-- <toast :message="message" :isShow="isShow"></toast> -->
 </div>
</template>

<script>
import DetailSwiper from './childComps/DetailSwiper.vue'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailBtnBar from './childComps/DetailBtnBar'

import {getDetail, Goods, Shop} from '@/network/detail'
import Scroll from '../../components/common/scroll/Scroll.vue'
// import Toast from '../../components/common/toast/Toast.vue'

import mapActions from 'vuex'

import { itemListenMixin,backTopMixin } from "common/mixin";


export default {
    components: {
        ChildDetail,
        DetailSwiper,
        DetailBaseInfo,
        Scroll,
        DetailCommentInfo,
        DetailBtnBar,
        Backtop,
        // Toast
     },
     name: 'Detail',
   data () {
     return {
       iid: null,
       shop:{},
       goods: {},
       componentInfo: {},
       detailInfo: {},
       themeTopYs: [],
       getThemeTopYs: null,
       currentIndex: 0,
      //  message: '',
      //  isShow: false

     }
   },
   mixins: [itemListenMixin,backTopMixin],
   created() {
     const data = res.result;
     this.iid = this.$route.params.iid
    
    getDetail(this.iid).then(res => {
      console.log(res);

      this.getThemeTopYs = debouce(() => {
        this.themeTopYs = []
        this.themeTopYs.push(0),
        this.themeTopYs.push(this.$refs.swiper.$el.offsetTop),
        this.themeTopYs.push(this.$refs.base.$el.offsetTop),
        this.themeTopYs.push(this.$refs.shop.$el.offsetTop),
        this.themeTopYs.push(this.$refs.comment.$el.offsetTop),
        this.themeTopYs.push(Number.MAX_VALUE)
      })
    })
    this.topImages = data.itemInfo.topImages
    this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
    this.shop = new Shop(data.shopInfo)
    this.detailInfo = data.detailInfo
    if(data.rate.cRate !== 0) {
      this.componentInfo = data.rate.list[0]
    }
   },
   methods: {
     ...mapActions([addToCart]),
     titleClick(index) {
       console.log(index);
     },
     detailImageLoad() {
      this.refresh()    
     },
     
     contentScroll(position) {
       const positionY = -position.y
       let length = this.themeTopYs.length
      //  for (let i = 0; i < length; i++) {
      //    if(this.currentIndex !== i && (((i < length - 1 && positionY >= this.themeTopYs[i]) && positionY < this.themeTopYs[i+1]) || (i===length) || 
      //    (i ===length - 1 && positionY >= this.themeTopYs[1]))) {
           
      //      this.currentIndex = i;
      //      this.$refs.nav.currentIndex = this.currentIndex
      //    }
         
      //  }
      for (let i = 0; i < length - 1; i++) {
        if(this.currentIndex !== i && (positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1])) {
          this.currentIndex = i;
          this.$refs.nav.currentIndex = this.currentIndex
        }
      }
     },
     addCart() {
       const product = {}
       product.image = this.topImages[0];
       product.title = this.goods.title;
       product.desc = this.goods.desc;
       product.price = this.goods.newprice;
       product.iid = this.iid;

       this.addToCart(product).then(res => {
      //    this.message = res,
      //    this.isShow = true;

      //    setTimeout(() => {
      //      this.isShow = false
      //    },1500)
      this.$toast.isShow(res, 2000)
       })
      
      //this.$store.commit('addToCart',product)
      
      // this.$store.dispath('addToCart',product).then(res => console.log(res))
    }
     
   },
   updated () {
    //  this.$nextTick(() => {  
    //  this.themeTopYs = []

    //  this.themeTopYs.push(0),
    //  this.themeTopYs.push(this.$refs.swiper.$el.offsetTop),
    //  this.themeTopYs.push(this.$refs.base.$el.offsetTop),
    //  this.themeTopYs.push(this.$refs.shop.$el.offsetTop),
    //  this.themeTopYs.push(this.$refs.comment.$el.offsetTop),
    //  })
   },
   mounted () {
     
   }
 }
</script>

<style scoped>
#detail {
  height: 100vh;

  position: relative;
  z-index: 9;
  background-color: #fff;
}

.detail-nav {
  position: relative;
  z-index: 9;
  background-color: #fff;
}

.content {
  height: calc(100% - 44px);
}
 
</style>
